<template>
  <div class="max-table" :style="defaultTheme">
    <div v-if="columns.length > 0" class="max-table-header">
      <table>
        <colgroup>
          <col v-for="column in showColumns" :style="{width:column.width}"/>
        </colgroup>
        <thead>
        <tr>
          <th v-for="column in showColumns">{{ column.title }}</th>
          <th style="padding: 2px"></th>
        </tr>
        </thead>
      </table>
    </div>
    <div class="max-table-body">
      <table>
        <colgroup>
          <col v-for="column in showColumns" :style="{width:column.width}"/>
        </colgroup>
        <tbody>
        <tr v-for="(row, index) in rows"
            :class="[{'current-row': currentIndex === index}]"
            @click="onClick(row, index)">
          <td v-for="column in showColumns"
              :style="{textAlign: column.align}">
            {{ row[column.dataIndex] }}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <ul v-if="mode !== 'list'" class="max-table-footer">
      <li @click="previousPage">上一页</li>
      <li v-for="showPage in showPages"
          :class="{'current-page': page.current === showPage.index}"
          @click="">
        {{ showPage.index }}
      </li>
      <li @click="nextPage">下一页</li>
    </ul>
  </div>
</template>

<script>
import {defineComponent, ref, reactive, watch} from 'vue';

export default defineComponent({
  name: 'maxTable',
  setup(props, context) {
    /**
     * 变量列表：
     * defaultTheme：默认主题配置
     * showColumns：表格显示竖列
     * showPages：表格显示页码
     * currentIndex：当前选中行编码
     */
    const defaultTheme = reactive({
      '--firstColor': '#409eff',
      '--secondColor': '#fff',
      '--thirdColor': '#a0cfff',
      '--fontColor': '#595f6e',
      '--backGroundColor': '#f0f0f0'
    });
    const showColumns = reactive([]);
    const showPages = reactive([]);
    const currentIndex = ref(-1);
    /**
     * 方法列表：
     * init：初始化
     * pagesChange：表格分页变化
     * columnsChange：表格竖列变化
     * onClick：表格点击事件
     * previousPage：上一页事件
     * nextPage：下一页事件
     */
    const init = () => {
      Object.assign(defaultTheme, props.theme);
      pagesChange();
      columnsChange(props.columns);
    }
    const pagesChange = () => {
      let size = parseInt(props.page.pageSize);
      if (size > 0) {
        let pages = Math.ceil(parseInt(props.total) / size);
        if (pages === 0) pages = 1;
        showPages.length = 0;
        for (let i = 0; i < pages; i++) {
          showPages.push({index: (i + 1).toString()});
        }
      }
    }
    const columnsChange = (columns) => {
      showColumns.length = 0;
      showColumns.push(...columns.filter(col => col.show !== false));
      showColumns.forEach(col => {
        if (!col.width) {
          col.width = (1 / showColumns.length * 100) + '%';
        }
      })
    }
    const onClick = (row, index) => {
      currentIndex.value = index;
      context.emit('onClick', row);
      context.emit("update:currentRow", row);
    }
    const previousPage = () => {

    }
    const nextPage = () => {

    }
    watch(() => props.columns, (newVal, oldVal) => {
      columnsChange(newVal);
    });
    init();
    return {
      defaultTheme,
      showColumns,
      showPages,
      currentIndex,
      columnsChange,
      onClick,
      previousPage,
      nextPage
    };
  },
  props: {
    mode: {
      type: String,
      default: 'page'
    },
    columns: {
      type: Array,
      default: []
    },
    rows: {
      type: Array,
      default: []
    },
    page: {
      type: Object,
      default: {
        current: '1',
        pageSize: '10'
      }
    },
    total: {
      type: String,
      default: '0'
    },
    currentRow: {
      type: Object,
      default: {}
    },
    editable: {
      type: Boolean,
      default: true
    },
    theme: {
      type: Object,
      default: {}
    }
  }
});
</script>

<style scoped>
.max-table {
  min-width: 524px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 56px;
  border: 1px solid var(--backGroundColor);
}

.max-table table {
  width: 100%;
  border-collapse: collapse;
}

.max-table-header {
  background: var(--firstColor);
  color: var(--secondColor);
  font-weight: 600;
}

.max-table-header th {
  padding: 6px;
  border: 1px solid var(--backGroundColor);
}

.max-table-body {
  color: var(--fontColor);
  overflow-y: scroll;
  min-height: 300px;
}

.max-table-body tr:hover {
  background: var(--thirdColor);
}

.max-table-body td {
  cursor: pointer;
  padding: 6px;
  border: 1px solid var(--backGroundColor);
}

.max-table-body::-webkit-scrollbar {
  width: 5px;
  height: 1px;
}

.max-table-body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: var(--firstColor);
}

.max-table-body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--backGroundColor);
  background: var(--secondColor);
}

.max-table-footer {
  float: right;
  margin: 8px 0px;
}

.max-table-footer li {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--fontColor);
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--backGroundColor);
  border-radius: 2px 2px 0 0;
  margin: 4px;
}

.max-table-footer li:active {
  background: var(--thirdColor);
}

.current-row {
  background: var(--thirdColor);
}

.current-page {
  color: var(--thirdColor) !important;
  border-color: var(--thirdColor) !important;
}
</style>